<template>
  <div class='container'>
    <el-dialog title="题目预览" @close="xx" :visible="showDialog" width="900px">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content">【题型】：{{ questionParticulars.questionType }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【编号】：{{ questionParticulars.id }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【难度】：{{ questionParticulars.difficulty }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【标签】：{{ questionParticulars.tags }}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content">【学科】：{{ questionParticulars.subjectName }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【目录】：{{ questionParticulars.directoryName }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【方向】：{{ questionParticulars.direction }}</div></el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col><div class="grid-content">【题干】：<div v-html="questionParticulars.question"></div></div></el-col>
      </el-row>
      <el-row>
        <el-col>
          <div class="grid-content">{{ questionParticulars.questionType }}题 选项：（以下选中的选项为正确答案）
          <div v-for="(item, index) in questionParticulars.options" :key="index" style="padding: 8px 0px">
            <el-radio v-model="item.isRight" v-if="questionParticulars.questionType === '单选'" :label="1" >{{ item.title }}</el-radio>
            <el-checkbox v-if="questionParticulars.questionType === '多选'" :value="item.isRight ? true : false" >{{item.title}}</el-checkbox>
          </div>
          </div>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          <div class="grid-content">【参考答案】：
            <el-button type="danger" size="small" @click="videoshow = !videoshow">
            视频答案预览
            </el-button>
          </div>
          <video :src="questionParticulars.videoURL" autoplay controls v-if="videoshow" width="500px"></video>
          </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col><div class="grid-content">【答案解析】：{{ questionParticulars.remarks }}</div></el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col><div class="grid-content">【题目备注】：{{ questionParticulars.remarks }}</div></el-col>
      </el-row>
      <el-row slot="footer" type="flex" justify="end">
          <el-button size="small" type="primary" @click="dialogclose">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    questionParticulars: {
      type: Object,
      required: true
    },
    showDialog: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      videoshow: false
    }
  },
  methods: {
    dialogclose () {
      this.videoshow = false
      this.$emit('update', false)
    },
    xx () {
      this.videoshow = false
      this.$emit('update', false)
    }
  }
}
</script>

<style scoped>
.header {
margin-bottom: 20px;
}
.explain {
  color: pink;
  font-size: 12px;
}
.table {
width: 100%;
margin-top: 15px;
}
.demo-form-inline /deep/ .el-input__inner {
    height: 32px;
    line-height: 32px;
}
.el-form-item--medium {
    margin-bottom: 16px;
}

.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
